<template>
  <view class="container">
    <view class="header">
      <text>市运营招商管理</text>
      <view @click="showFilter">筛选</view>
    </view>
    <view class="tabs">
      <view class="tab" :class="{active: currentTab === 0}" @click="switchTab(0)">团队管理</view>
      <view class="tab" :class="{active: currentTab === 1}" @click="switchTab(1)">成员管理</view>
      <view class="tab" :class="{active: currentTab === 2}" @click="switchTab(2)">业绩管理</view>
    </view>
    <view v-if="currentTab === 0">
      <!-- 团队管理内容 -->
      <view v-for="team in teams" :key="team.id">
        <view>{{team.group_name}}</view>
        <view>成员: {{team.member_total}}人</view>
        <!-- 更多细节 -->
      </view>
      <view @click="createTeam">创建新团队</view>
    </view>
    <view v-if="currentTab === 1">
      <!-- 成员管理内容 -->
    </view>
    <view v-if="currentTab === 2">
      <!-- 业绩管理内容 -->
    </view>
  </view>
</template>

<script>
import api from '@/api/index.js'
export default {
  data() {
    return {
      currentTab: 0,
      teams: []
    }
  },
  onLoad() {
    this.loadTeams()
  },
  methods: {
    switchTab(index) {
      this.currentTab = index
    },
    async loadTeams() {
      const res = await api.management.groupList()
      this.teams = res.data.list
    },
    createTeam() {
      // 实现创建团队
    },
    // 移植其他JS逻辑
  }
}
</script>

<style lang="scss" scoped>
/* 移植自investment.css */
.wrapper {
  top: 1.8rem;
  background-color: #EEEEEE;
}

.shenqing_state {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.shenqing_state li {
  width: 33.3%;
  height: 0.8rem;
  font-size: 0.32rem;
  padding: 0 0.3rem;
  position: relative;
}

.line {
  position: absolute;
  right: 0;
  top: 0.1rem;
  width: 1px;
  height: 0.6rem;
  background-color: #B2B1AC;
}

.shenqing_state li p {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.3rem;
}

.active {
  color: #FF2E00;
  border-bottom: 1px solid #FF2E00;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

/* 团队管理 */
#tuandui {
  background-color: #fff;
  margin-top: .15rem;
}

#tuandui .member {
  height: .9rem;
  line-height: .9rem;
  padding: 0 .3rem;
  border-bottom: 1px solid #ddd;
  margin: 0;
}

#addtd {
  width: 100%;
  height: .9rem;
  line-height: .9rem;
  background-color: #ff9600;
  font-size: .36rem;
  text-align: center;
  color: #fff;
  position: fixed;
  bottom: 0;
}

.item {
  padding: 0 .3rem;
  color: #8F8F8F;
  padding-bottom: .2rem;
}

.item div {
  margin-top: .2rem;
}

.item span {
  color: #4B4B4B;
}

.item .copy {
  color: #27b387;
  border: 1px solid #27b387;
  border-radius: .06rem;
  padding: 0 .1rem;
}

.item_btn {
  width: 100%;
  color: #ff9600;
  padding: .15rem 0;
  border-top: 1px solid #EEEEEE;
  border-bottom: .2rem solid #eee;
}

.item_btn li {
  float: left;
  width: 33%;
  text-align: center;
  height: .5rem;
  line-height: .5rem;
}

.item_btn li:first-child {
  color: #27b387;
}

.item_btn li:nth-child(2) {
  border-left: 1px solid #EEEEEE;
  border-right: 1px solid #EEEEEE;
}

/* 成员管理 */
#chengyuan {
  padding: .2rem 0;
}

.member {
  height: .9rem;
  width: 100%;
  line-height: .9rem;
  color: #8F8F8F;
  padding: 0 .3rem;
  background: #fff;
  margin-bottom: .2rem;
}

.member span {
  color: #FF1E00;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.items {
  padding: .2rem .3rem;
}

.detail>div {
  float: left;
}

#abcd li {
  background: #fff;
  margin-bottom: .2rem;
}

.box {
  border-top: 1px solid #ddd;
  padding: .2rem .3rem;
}

.yqrs {
  padding: .2rem;
  border: 1px solid #ddd;
}

.yqrs>div {
  float: left;
  width: 33%;
  text-align: center;
}

.yqrs>div p:first-child {
  margin-bottom: .1rem;
}

.yqrs>div p span {
  color: #FF1E00;
}

.add_time {
  color: #8F8F8F;
  padding-top: .2rem;
}

.add_time span {
  color: #4B4B4B;
}
</style>